<template>

  <div>
    <!--  默认情况下只显示一条  -->
    <span>{{ `${getProdPropByKey('IndexStart')}-${getProdPropByKey('IndexEnd')} / ${getProdPropByKey('AllNum')}` }}</span>

    <!--    详情信息里面显示全部      placement="right"     -->
    <el-popover
      title="产品张数详情"
      trigger="click"
      width="500">
      <div>
        <!--     其他张数页暂时不显示   -->
        <AzureDynamicTable :column-des-objs="columnDesObjs" :data="productDetails"/>
      </div>
      <el-button slot="reference" type="text" v-if="productDetails.length > 1">
        more
      </el-button>
    </el-popover>

  </div>

</template>

<script>

  //  视图组件,产品开始和结束的展示,为了区分多个起始和结束
  //  接受的参数 产品详细vos

  import PackConsignment from '@/views/productManagement/aMixins/PackConsignment'
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'

  export default {
    name: 'DetailOfProductOfBag',
    components: { AzureDynamicTable },
    mixins: [PackConsignment],
    props: {
      productDetails: {
        type: Array
      }
    },
    data() {
      return {
        columnDesObjs: [
          // "OtherIndex": [],
          // { label: '材料价格(元)', key: 'costPrice', filter: moneySuffix },
          { key: 'prodName', label: '产品名' },
          { key: 'IndexStart', label: '开始照片' },
          { key: 'IndexEnd', label: '结束照片' },
          { key: 'AllNum', label: '全部页' }
          // { key: 'prodName3', label: '包装数量' },

          // { key: 'createBy', label: '创建人' },
          // { key: 'createTime', label: '创建时间', dateFormat: true},
          // { key: 'updateBy', label: '修改人' },
          // { key: 'updateTime', label: '修改时间', width: 230, dateFormat: true },
          // { label: '操作', key: 'operator', width: 180 }
        ]
      }
    },

    methods: {
      //  获取到 value
      getProdPropByKey(key, idx = 0) {
        return Object.values(this.productDetails)[idx][key]
      }
    }

  }
</script>

<style lang="scss" scoped>

</style>
